<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import era from '../../api/era';

const eraChart = ref(null);
// 窗口变化时自适应
window.addEventListener('resize', () => {
    echarts.getInstanceByDom(eraChart.value)?.resize();
});
onMounted(() => {
    era.getEraCollection().then((res) => {
        const chart = echarts.init(eraChart.value);
        const option = {
            title: { text: '文物年代分布（含待审核）', left: 'center' },
            tooltip: { trigger: 'item' },
            series: [{
                type: 'pie',
                radius: ['40%', '70%'],
                label: { show: true, formatter: '{b}: {d}%' },
                data: res.data.data.map(item => ({
                    name: item.era,
                    value: item.count
                }))
            }]
        };
        chart.setOption(option);
    });
});
</script>
<template>
    <div ref="eraChart" style="height: 400px;"></div>
</template>
<style scoped></style>